<!-- src/components/UserList.vue -->
<template>
  <div class="user-list">
    <h2>User List</h2>
    <!-- table:   表格容器-->
    <table style="width: 100%; text-align: center;">
      <!--     thead: 表格头部，用于定义标题行。-->
      <thead>
      <tr>
        <th v-for="header in headers" :key="header.code">{{ header.name }}</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="user in users" :key="user._id">
        <td v-for="header in headers" :key="header.code">{{ user[header.code] }}</td>
      </tr>
      </tbody>
    </table>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script>
import {user_list} from "@/api/user";

export default {
  name: "UserList",
  data() {
    return {
      users: [],
      headers: [],
      error: ''
    };
  },
  methods: {
    async getUsers() {
      const response = await user_list();
      const response_data = response.data;
      if (response_data.code === 'fail') {
        this.error = response_data.msg
      } else {
        this.headers = response_data.data.header;
        this.users = response_data.data.data;
      }

    }
  },
  created() {
    this.getUsers();
  }
};
</script>

<style scoped>
.user-list {
  max-width: 600px;
  margin: 0 auto;
}
</style>
